import React, { useEffect, useState } from 'react';
import { Card, Typography, Spin, Empty, Row, Col, Rate, Button } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import recommendationService from '../../services/RecommendationService';
import { useParams, useSearchParams, useNavigate } from 'react-router-dom'; // 引入 useParams、useSearchParams 和 useNavigate
import '../../styles/MovieRecommend.css';

const { Title, Text } = Typography;

const MovieDetail = () => {
  const { movieId } = useParams(); // 使用 useParams 获取路由参数
  const [searchParams] = useSearchParams(); // 获取查询参数
  const navigate = useNavigate(); // 使用 useNavigate 进行路由导航
  const source = searchParams.get('source'); // 获取source参数
  const [movie, setMovie] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(''); 

  useEffect(() => {
    const loadData = async () => {
      try {
        setLoading(true);
        const result = await recommendationService.getMovieDetail(movieId, source); 
        if (result.success) {
          setMovie(result.data);
        } else {
          setError(result.message || '获取数据失败');
        }
      } catch (error) {
        setError('网络错误，请稍后重试');
      } finally {
        setLoading(false);
      }
    };
    loadData();
  }, [movieId]);

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '100px 0' }}>
        <Spin size="large" tip="加载电影详情中..." />
      </div>
    );
  }

  if (error) {
    return (
      <div style={{ textAlign: 'center', color: 'red', padding: '50px 0' }}>
        {error}
      </div>
    );
  }

  if (!movie) {
    return <Empty description="暂无电影详情数据" />;
  }

  return (
    <div className="movie-recommend">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
        <Button
          type="text"
          onClick={() => navigate(-1)}
          icon={<ArrowLeftOutlined />}
          className="movie-recommend-back-button"
        >
          返回
        </Button>
      </div>
      <Card 
        className="movie-recommend-detail"
      >
        <Row gutter={[16, 16]}> 
          <Col xs={24} sm={24} md={8} lg={8}> 
            <img
              src={movie.poster_url}
              alt={movie.title}
            />
          </Col>
          <Col xs={24} sm={24} md={16} lg={16}> 
            <Title level={2}>
              {movie.title}
            </Title>
            <Text type="secondary">
              {movie.year} · {movie.genre.join(' / ')}
            </Text>
            <div className="rating-container">
              <Rate disabled allowHalf defaultValue={movie.rating / 2} />
              <Text strong className="rating-value">{movie.rating === 0 || movie.rating === null || movie.rating === undefined ? '暂无评分' : (typeof movie.rating === 'number' ? movie.rating.toFixed(1) : (isNaN(parseFloat(movie.rating)) ? '暂无评分' : parseFloat(movie.rating).toFixed(1)))}</Text>
            </div>
            <Text type="secondary" className="director">
              导演: {movie.director}
            </Text>
            <br /> 
            <Text type="secondary" className="description">
              剧情简介：{movie.description}
            </Text>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default MovieDetail;